<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>购物车</title>
		<meta name="keywords" content="">
		<meta name="description" content="">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="renderer" content="webkit" />
		<meta name="viewport" content="width=1100,initial-scale=1,maximum-scale=1,user-scalable=yes">

		<link rel="Shortcut Icon" href="../static/favicon.ico">
		<!-- Standard iPad -->
		<link rel="apple-touch-icon" type="image/x-icon" sizes="72x72" href="../static/touch-icon-ipad-144.png" />
		<!-- Retina iPad -->
		<link rel="apple-touch-icon" type="image/x-icon" sizes="144x144" href="../static/touch-icon-ipad-144.png" />
		<link rel="stylesheet" href="../static/css/main.css">
		<link rel="stylesheet" href="../static/css/shoppingCart.css">
		<!--[if lt IE 9]>
	<script src="../static/js/html5.js"></script>
	<![endif]-->
	</head>

	<body>
		<!--头部-->
		<header class="header">
			<div class="topbar">
				<div class="layout">
					<div class="bar_left">
						<ul>
							<li><span style="color: #fff;">畅想品质生活</span></li>
							<li style="margin-left: 40px;"><span>客服电话：400-996-4866</span></li>
							<li class="WeChat">
								<i></i>
								<div>
									<span><em></em></span>
									<img src="../static/images/WeChat.jpg">
									<p>扫一扫加微信</p>
								</div>
							</li>
							<li class="weibo">
								<a href=""><i></i></a>
								<!-- <div>
								<span><em></em></span>
								<img src="../static/images/weibo.png">
								<p>扫一扫加微博</p>
							</div> -->
							</li>
						</ul>
					</div>
					<div class="bar_right" style="display: none" ;>
						<a href="">登录</a>&nbsp;&nbsp;
						<a href="">注册</a>&nbsp;&nbsp;|&nbsp;
						<a href="">我的订单</a>&nbsp;&nbsp;|
						<a href="">下载APP</a>
					</div>
					<!-- 登陆后显示 -->
					<div class="bar_right">
						<span>欢迎您</span>
						<a href="">boss，</a>
						<a href="javascript:;">退出</a>&nbsp;&nbsp;|
						<a href="">我的订单</a>&nbsp;&nbsp;|
						<a href="">下载APP</a>

					</div>

				</div>
			</div>
			<!-- topbar-end -->
			<div class="logo">
				<div class="layout">
					<div class="logo_left">
						<!-- logo size 200px*70px -->
						<a href="" class="logoimg">
							<img src="../static/images/login_log.png" alt="">
						</a>
					</div>
					<div class="logo_right">
						<div class="search">
							<input type="text" placeholder="黑龙江顶级黑木耳">
							<a href="" class=""></a>
						</div>
						<div class="shopping-cart">
							<a href="">
								<span class="badge">12</span>
							</a>
						</div>
					</div>
				</div>
			</div>
			<nav class="nav">
				<div class="layout">
					<ul class="">
						<li>
							<a href="" class="active">首页</a>
						</li>
						<li>
							<a href="">进口食品</a>
						</li>
						<li>
							<a href="">小家电</a>
						</li>
						<li>
							<a href="">养生精品</a>
						</li>
						<li>
							<a href="">精品农业</a>
						</li>
						<li>
							<a href="">茶叶</a>
						</li>
						<li>
							<a href="">户外运动</a>
						</li>
						<li>
							<a href="">厨房电器</a>
						</li>
						<li>
							<a href="">锅具</a>
						</li>
						<li>
							<a href="">生活电器</a>
						</li>
					</ul>
				</div>
			</nav>
		</header>
		<!--内容-->
		<div class="content">
			<!--全选-->
			<form action="" method="post">
				<div class="commodity_Select">
					<span><input type="checkbox"class="input_check" id="select"><label for="select"></label></span>
					<span>全选</span>
					<span>商品信息</span>
					<span>单价</span>
					<span>数量</span>
					<span>小计</span>
					<span>操作</span>
				</div>

				<!--商铺商品订单-->
				<div class="shops_commodity">
					<div class="shops">
						<span><input type="checkbox"class="input_check" id="shop1"><label for="shop1"></label></span>
						<span>苏泊尔专卖店</span>
					</div>
					<!--商品详情-->
					<div class="commodity">
						<span><input value="" type="checkbox"class="input_check input_checks" id="check1"><label for="check1"></label></span>
						<span><img src="../static/images/hu.png"/></span>
						<span>
						苏泊尔  一款容量为1.7L的电水壶<br />
						<p>1.7L</p>
					</span>
						<span class="unit_Price">¥<div>1699.00</div></span>
						<span class="subtotal">¥<div></div></span>
						<span>删除</span>
						<div class="commodity_num">
							<p class="reduce">-</p>
							<p class="number">2</p>
							<p class="add">+</p>
						</div>

					</div>

					<div class="commodity">
						<span><input value="" type="checkbox"class="input_check input_checks" id="check2"><label for="check2"></label></span>
						<span><img src="../static/images/hu.png"/></span>
						<span>
						苏泊尔  一款容量为1.7L的电水壶<br />
						<p>1.7L</p>
					</span>
						<span class="unit_Price">¥<div>2699.00</div></span>
						<span class="subtotal">¥<div></div></span>
						<span>删除</span>
						<div class="commodity_num">
							<p class="reduce">-</p>
							<p class="number">2</p>
							<p class="add">+</p>
						</div>

					</div>
					
					

				</div>

				<!--结算-->
				<div class="settlement">
					<span><input type="checkbox"class="input_check" id="selected"><label for="selected" style="vertical-align:middle;"></label><span style="vertical-align:middle;margin-left: 10px;">已选（<p style="display: inline;">1</p>）</span></span>
					<span>删除选中商品</span>
					<span>应付金额：<p class="total">¥00.00</p></span>
					<input type="submit" class="settlement_btn" name="" id="" value="结算" />
				</div>
			</form>
			<!-- 猜你喜欢部分 -->
			<div class="guess" style="margin-top: 60px;">
				<p class="guess_title">
					<span>猜你喜欢</span>
				</p>
				<ul class="product_list clearfix">
					<li class="product_item">
						<a href="">
							<img src="../temp/guess01.png" alt="">
							<p class="active_label">
								<span>活动促销</span>
							</p>
							<p class="describe">苏泊尔 一款容量为1.7L的电水壶的电水壶的电水壶的电水壶</p>
							<p class="price">
								<span>￥</span>
								<span>999.00</span>
							</p>
						</a>
					</li>
					<li class="product_item">
						<a href="">
							<img src="../temp/guess02.png" alt="">
							<p class="active_label"></p>
							<p class="describe">FREE ROCKSTUD 小号肩背包</p>
							<p class="price">
								<span>￥</span>
								<span>666.00</span>
							</p>
						</a>
					</li>
					<li class="product_item">
						<a href="">
							<img src="../temp/guess03.png" alt="">
							<p class="active_label"></p>
							<p class="describe">踏步机家用静音减肥脚踏机</p>
							<p class="price">
								<span>￥</span>
								<span>888.00</span>
							</p>
						</a>
					</li>
					<li class="product_item">
						<a href="">
							<img src="../temp/guess04.png" alt="">
							<p class="active_label"></p>
							<p class="describe">爱仕达 中国红新不粘三件套装锅</p>
							<p class="price">
								<span>￥</span>
								<span>178.00</span>
							</p>
						</a>
					</li>
				</ul>
			</div>
			<!-- 猜你喜欢结束 -->
		</div>
		<!--尾部-->
		<footer class="footer">

		</footer>
	</body>

</html>
<script src="../static/js/jquery.min.js"></script>
<script>
	$('.commodity').each(function(i) {
		//加
		$('.add').eq(i).click(function() {
			var add_num = parseInt($('.number').eq(i).text())
			$('.number').eq(i).text(add_num += 1)
			var Subtotal = $('.commodity .unit_Price div').eq(i).text() * $('.number').eq(i).text();
			$('.commodity .subtotal div').eq(i).text(Subtotal)
			$('.commodity .input_check').eq(i).val(Subtotal)
			
			//总价
			var anum=0;
			$('.input_checks:checkbox:checked').each(function(c){
				anum+=parseInt($(this).val())
			})
			$('.total').text('¥'+anum)

		})

		//减
		$('.reduce').eq(i).click(function() {
			if($('.number').eq(i).text()>1){
				var reduce_num = parseInt($('.number').eq(i).text())
				$('.number').eq(i).text(reduce_num - 1);
				var Subtotal = $('.commodity .unit_Price div').eq(i).text() * $('.number').eq(i).text();
				$('.commodity .subtotal div').eq(i).text(Subtotal)
				$('.commodity .input_check').eq(i).val(Subtotal)
				
				//总价
				var anum=0;
				$('.input_checks:checkbox:checked').each(function(c){
					anum+=parseInt($(this).val())
				})
				$('.total').text('¥'+anum)
			}
		})

		//默认数量
		var Subtotal = $('.commodity .unit_Price div').eq(i).text() * $('.number').eq(i).text();
		$('.commodity .subtotal div').eq(i).text(Subtotal)
		$('.commodity .input_check').eq(i).val(Subtotal)

		
		
		//总价
		$(".input_check").attr("checked", true);
		var anum=0;
		$('.input_checks:checkbox:checked').each(function(c){
			anum+=parseInt($(this).val())
		})
		$('.total').text('¥'+anum);
		
		
		//全选/全不选
		$('#select').click(function(){
			var checkElements = document.getElementsByClassName('input_check');
			if(this.checked) {
				for(var i = 0; i < checkElements.length; i++) {
					var checkElement = checkElements[i];
					checkElement.checked = "checked";
				}
				//全选总价
				var anum=0;
				$('.input_checks:checkbox:checked').each(function(c){
					anum+=parseInt($(this).val())
				})
				$('.total').text('¥'+anum);
	
			} else {
				for(var i = 0; i < checkElements.length; i++) {
					var checkElement = checkElements[i];
					checkElement.checked = null;
				}
				//全不选总价
				var anum=0;
				$('.input_checks:checkbox:checked').each(function(c){
					anum+=parseInt($(this).val())
				})
				$('.total').text('¥'+anum);
			}
		})
		
		
	})
</script>